<template>
  <Modal v-model="modal" :title="title">
    <div class="tag-modal">
        <Form :model="form" :label-width="80" ref="form" :rules="rules">
            <FormItem label="标签名称" prop="name">
                <Input :maxlength="20" v-model.trim="form.name" placeholder="标签名称..."/>
            </FormItem>
            <FormItem label="标签背景色">
              <div class="tag-labelText" v-for="(item, index) in colorArr" :key="index">
                <Icon type="md-radio-button-on item active" size="16" v-if="currentIndex == index" @click="changeColor(index)"></Icon>
                <Icon type="md-radio-button-off item" size="16" v-else  @click="changeColor(index)"></Icon>
                <div class="tag-bgColor" :style="{'background':item}"></div>
              </div>
            </FormItem>
        </Form>
    </div>
    <div slot="footer">
        <Button @click="modal = false" size="large" type="text">取消</Button>
        <Button :disabled="btnDisabled" @click="onSave" type="primary" size="large">确定</Button>
    </div>
</Modal>
</template>
<script>
export default {
  data() {
    const validateName = (rule, value, callback) => {
      if (value.trim() === '') {
          callback(new Error('请输入标签名称'))
      } else {
          if (value.length < 2) {
            callback(new Error('标签名称在2-20个字之间'))
          } else {
            if (this.oldName != value) {
              this.checkOnly().then(() =>{
                if (this.flag) {
                  callback(new Error('该标签名称已存在'))
                } else {
                  callback()
                }
              })
            } else {
              callback()
            }
          } 
      }
    }
    return {
      id: null,
      modal: false,
      title: '新增标签',
      currentIndex: -1,
      bgColor: '',
      btnDisabled: false,
      rules: {
        name: [
          { required: true, validator: validateName, trigger: "blur" }
        ]
      },
      colorArr:['#ffa791', '#7aeca8', '#fccc7e', '#86d6ff', '#dcdcdc'],
      form: {
        name: ''
      },
      showColor: false,
      flag: false,
      oldName: null
    }
  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields()
      this.form = {
        name: ''
      }
      this.bgColor = ''
      this.oldName = ''
      this.showColor = false
      this.currentIndex = -1
      this.flag = false
      this.btnDisabled = false
      this.title = '新增标签'
    },
    updateForm(id) {
      this.resetForm()
      this.id = null
      if (id) {
        this.getInfo(id)
        this.title = '编辑标签'
      } else {
        this.openModal()
      }
    },
    changeColor(index) {
      this.currentIndex = index
      this.bgColor = this.colorArr[index]
    },
    async checkOnly() {
      let param = {
        name: this.form.name
      }
      await this.$ajaxGet('/product/tag/product_center/exits/name', param).then(data => {
        this.flag = data
      })
    },
    openModal() {
      this.modal = true
    },
    closeModal() {
      this.modal = false
    },
    getInfo(id){
      this.id = id
      this.$ajaxGet(`/product/tag/product_center/${id}`).then(data =>{
        this.form.name = data.name
        this.oldName = data.name
        this.openModal()
        if(data.color) {
          this.colorArr.forEach((item, i) =>{
            if (item === data.color) {
              this.changeColor(i)
            }
          })
        }
      })
    },
    onSave() {
      if (this.btnDisabled) return
      this.btnDisabled = true
      this.$refs["form"].validate(valid => {
        if (valid) {
          let text = this.id ? '编辑' : '新增'
          let url = this.id ? '/product/tag/product_center/update' : '/product/tag/product_center/add'
          let param = {
            name: this.form.name,
            color: this.bgColor
          }
          if (this.id) param.id = this.id
          this.$jsonPost(url, param).then(data => {
            this.$Notice.success({
              title: `${text}成功`
            })
            this.$emit('complete')
            this.closeModal()
          }).catch(() => {
            this.btnDisabled = false
          })
        } else {
          this.btnDisabled = false
        }
      })
    }
  }
}
</script>